<!--
 * @Author: your name
 * @Date: 2020-08-31 10:28:20
 * @LastEditTime: 2020-09-15 10:30:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\basic\basic-header.vue
-->
<template>
  <el-header>
    <el-row>
      <el-col :span="12" class="header-left">
        <span v-html="$store.state.configuration.title"></span>
      </el-col>
      <el-col :span="12" class="header-right">
         <el-dropdown trigger="click">
          <i class="el-icon-date" style="margin-right: 15px;font-size:18px"></i>
          <template #dropdown>
            <el-calendar>
              <template #dateCell="{data}">
                <p :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                </p>
              </template>
            </el-calendar>
          </template>
        </el-dropdown>
        <el-dropdown trigger="click">
          <i class="el-icon-message" style="margin-right: 15px;font-size:18px">
            <el-badge is-dot></el-badge>
          </i>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <i class="el-icon-user el-icon--left"></i>
                新增访客
              </el-dropdown-item>
              <el-dropdown-item divided>
                <i class="el-icon-star-off el-icon--left"></i>
                新增留言
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown @command="handleCommand" trigger="click">
          <div class="user-dropdown">
            <!-- <el-avatar class="userInfo-avatar" shape="square" :size="30" :src="$store.state.userInfo.Avatar"></el-avatar> -->
            <!-- <img :src="BASE_IMAGE_URL + $store.state.userInfo.Avatar.FileName" class="userInfo-avatar"/> -->
            <el-avatar
            icon="el-icon-picture-outline-round"
            size="small"
            :src="BASE_IMAGE_URL + $store.state.userInfo.Avatar[0].FileName"></el-avatar>
            <span>{{ $store.state.userInfo.NickName || '9527' }}</span>
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="setting"><i class="el-icon-setting el-icon--left"></i>账号设置</el-dropdown-item>
                <el-dropdown-item command="profile"><i class="el-icon-user el-icon--left"></i>个人资料</el-dropdown-item>
                <el-dropdown-item command="refresh"><i class="el-icon-refresh el-icon--left"></i>权限刷新</el-dropdown-item>
                <el-dropdown-item command="logout" divided><i class="el-icon-switch-button el-icon--left"></i>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <UserProfile
    v-model:visible="Profile.visible"
    v-if="Profile.visible"
    :formData="Profile"
    :formTitle="Profile.title"
    :data="Profile.data"
    :Checked="Profile.Checked"
    @userProfileConfirm="userProfileConfirm"/>
    </el-header>
</template>

<script>
import { getCurrentInstance, reactive, ref } from 'vue';
import { BASE_IMAGE_URL } from '@/utils/config';
// import { ElMessage } from 'element-plus';
import UserProfile from './user-profile.vue';
export default {
  name: 'BasicHeader',
  components: {
    UserProfile,
    // UploadDialog
    // FormsItems
  },
  setup(option) {
    let { ctx } = getCurrentInstance();
    // 弹窗信息
    let Profile = reactive({
      visible:false,
      forms:[],
      title:"",
      data:{},
      Checked:[]
    })
    // 用户设置
    async function setting() {
      // let res = await ctx.$fetch.get('user/Logout');
      // if(res.Code >= 0)
      // {
      //   ctx.$message.success(res.Msg)
      //   ctx.$store.commit('CLEAR_CACHE');
      //   ctx.$router.replace({
      //     name: 'Login'
      //   });
      // }else
      // {
      //   ctx.$message.error("网络异常,请重试!")
      // }
    }

    // 用户资料
    async function profile() {
      Profile.visible = true
      Profile.data = ctx.$store.state.userInfo
      let UserConfigResult = await ctx.$fetch.get('User/UserConfig');
      if(UserConfigResult.Code >= 0)
      {
        let forms = []
        for(let i = 0; i < UserConfigResult.Data.Forms.length; i++)
        {
          if(UserConfigResult.Data.Forms[i].Key != "AdminRoleId" && UserConfigResult.Data.Forms[i].Key != "Status" )
          {
            forms.push(UserConfigResult.Data.Forms[i])
          }
        }
        Profile.forms = forms
      }
    }
    // 刷新权限
    async function refresh() {
      let res = await ctx.$fetch.get('/User/ReloadRole');
      ctx.$store.dispatch('SET_USERROLEMENUS', res.Data);
      ctx.$message.success(res.Msg)
    }

    // 退出登录
    async function logout() {
        let res = await ctx.$fetch.get('/User/Logout');
        if(res.Code >= 0)
        {
          ctx.$message.success(res.Msg)
          ctx.$store.commit('CLEAR_CACHE');
          ctx.$router.replace({
            name: 'Login'
          });
        }else
        {
          ctx.$message.error("网络异常,请重试!")
        }
    }
    async function userProfileConfirm(){
        Profile.data.FileId = Profile.Checked[0].FileId
        let res = await ctx.$fetch.post('/User/UpdateUserInfo',Profile.data).catch(
          (e) => {
            ctx.$message.error(e.Msg)
          }
        );
        if(res.Code >= 0)
        {
          ctx.$store.state.userInfo.Avatar = Profile.data.Avatar
          Profile.visible = false
          ctx.$store.dispatch('GET_USERINFO', Profile.data)
          ctx.$message.success(res.Msg)
        }else
        {
          ctx.$message.error("网络异常,请重试!")
        }
    }
    function handleCommand(command) {
      // ctx.$message.success('click on item ' + command);
      switch (command)
      {
        case "setting":
          console.log("setting")
          setting()
          break
        case "profile":
          console.log("profile")
          profile();
          break
        case "refresh":
          console.log("refresh")
          refresh();
          break
        case "logout":
          console.log("logout")
          logout();
          break
      }
    }
    return {
      logout,
      BASE_IMAGE_URL,
      Profile,
      handleCommand,
      userProfileConfirm
      // userInfo
    };
  }
};
</script>
<style lang="scss" scoped>
  .el-header {
    background-color: #fff;
    color: #333;
    line-height: 60px;
    padding:0;
    border-bottom: solide 1px #666;
  }
  .el-avatar{
    margin-right: 4px;
    background-color: #ffffff;
    color: #616266;
    font-size: 28px;
  }
  .el-row .el-col{
    height: 60px;
  }
  .el-header .header-left{
    text-align: left;
    font-size: 22px;
    font-weight: 400;
    padding-left:20px;
  }
  .el-header .header-right{
    display: flex;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    justify-content: flex-end;
  }
  .el-dropdown{
    top: 0;
  }
  .user-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  // margin-right: 20px;
  font-size: 14px;
  padding:0 20px  0 10px;
  .el-avatar--square{
    margin-right: 10px;
    width:100%; height:auto;
  }
  // color: white;
    .userInfo-avatar {
      width: 26px;
      height: 26px;
      margin-right: 10px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
      transform-origin: 5% 40%;
      &:hover {
        // transform: rotate(180deg);
      }
    }
  }
  .user-dropdown:hover{
    background-color: #edf2f3;
  }
  .el-dropdown-menu{
    padding: 10px;
  }
  </style>
